﻿@page "/components/NumericField"


<DocsPage>
	<DocsPageHeader Title="Numeric Field" SubTitle="Numeric field components are used for receiving user provided numbers." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Basic Numeric Fields">
                <Description>
                    Numeric fields are just like <MudLink Href="/components/textfield">text fields</MudLink> but work well with numeric values of any type. The input is automatically restricted to numeric values and it works regardless of the browser locale settings for decimal types.<br/>
                    <CodeInline>Min</CodeInline> and <CodeInline>Max</CodeInline> attributes allow to restrict the value within the limits. If they are not specified, the full value range for the type (i.e <CodeInline>@int.MinValue</CodeInline> and <CodeInline>@int.MaxValue</CodeInline> for <CodeInline>int</CodeInline>) is permitted.
                    The <CodeInline>Step</CodeInline> attribute defines how much the value changes when using the up/down buttons on the right, or with the up/down keys on the keyboard. If not specified, the default value is 1.
                    <br/>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: for floating point or decimal values, passing a string literal for <CodeInline>Min</CodeInline>, <CodeInline>Max</CodeInline> or <CodeInline>Step</CodeInline> might trigger a compilation error in the generated Razor code. You can either add a decimal point (i.e. <CodeInline>0.0</CodeInline>) or suffix (i.e. <CodeInline>0.5M</CodeInline> for decimal).</MudAlert>
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: check out <MudLink Href="/components/textfield">MudTextField</MudLink> for examples regarding Adornments, Usage in a Form, Select and Focus etc.</MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="NumericFieldBasicExample">
                <NumericFieldBasicExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Hide Spin Buttons">
                <Description>
                    This property can be set to hide the spinner buttons, preventing the user to increase and decrease the value by mouse or touch input.<br>
                    It can still be changed with the keyboard up/down keys, or manually.
                </Description>
            </SectionHeader>
            <SectionContent Class="demo-numericfield" Code="NumericFieldHideButtonsExample" ShowCode="false">
                <NumericFieldHideButtonsExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Setting Culture and Format">
                <Description>
                    You can set a custom culture and format which will be used for parsing the numeric value from the input string as well as for presentation.
                </Description>
            </SectionHeader>
            <SectionContent Code="NumericFieldCultureExample">
                <NumericFieldCultureExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Binding Value Types vs Nullables">
                <Description>
                    When you bind value types, the numeric field will not be empty even if the user hasn't entered a value yet because a value type always has a value, even when unassigned.
                    The two-way-bindable <CodeInline>Value</CodeInline> property will automatically assume the default value of that type (i.e. <CodeInline>0</CodeInline> for <CodeInline>int</CodeInline>).<br/>
                    Thus, if you want your numeric fields to be empty, as long as nothing has been entered yet or after the field has been cleared, use the nullable version of that type (i.e. <CodeInline>int?</CodeInline>).<br/>
                    Do not assign null values to <CodeInline>Min</CodeInline>, <CodeInline>Max</CodeInline> and <CodeInline>Step</CodeInline>.
                </Description>
            </SectionHeader>
            <SectionContent Code="NumericFieldBindingValueTypesExample" ShowCode="false">
                <NumericFieldBindingValueTypesExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Normal vs Immediate vs Debounced">
                <Description>
                    By default, <CodeInline>MudNumericField</CodeInline> updates the bound value on Enter or when it loses focus. Set <CodeInline>Immediate="true"</CodeInline> to update the value whenever the user types.<br/>
                    You can also set the <CodeInline>DebounceInterval</CodeInline> parameter to the number of milliseconds you want to wait before updating the bound value. If you need to know when the interval elapses, you can pass an <CodeInline>OnDebounceIntervalElapsed</CodeInline> EventCallback.
                    Notice how in this example the debounced text only updates 500 ms after you stop typing.
                    <MudAlert Severity="Severity.Warning" Dense="true" Class="mt-3">Warning: Pressing Arrow Up/Down or Shift + MouseWheel are not debounced.</MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent Code="DebouncedNumericFieldExample" ShowCode="false">
                <DebouncedNumericFieldExample/>
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Change the Value with the Mouse Wheel">
                <Description>
                    You can change MudNumericField's value (by step) with Shift + MouseWheel.
                    You can also set the <CodeInline>InvertMouseWheel</CodeInline> parameter to reverse the mouse wheel up and down event.
                </Description>
            </SectionHeader>
            <SectionContent Code="ChangeTheValueWithTheMouseWheelExample" ShowCode="false">
                <ChangeTheValueWithTheMouseWheelExample/>
            </SectionContent>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>
